import React, { useState, useEffect } from "react"
import "./index.css"
import BulletScreen, { StyledBullet } from 'rc-bullets';
const headUrl = 'https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';
const Pushlive = (props) => {
    const { location: { state: { item } } } = props

    const [screen, setScreen] = useState(null);
    // 弹幕内容
    const [bullet, setBullet] = useState('');

    useEffect(() => {
        // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块。此处的配置项全局生效
        /// 初始化弹幕屏幕，设置滚动时长
        let s = new BulletScreen('.boxlive', { duration: 8 });
        // or
        // let s=new BulletScreen(document.querySelector('.screen));
        setScreen(s);
    }, []);
    /// 点击返回
    const btngo = () => {
        props.history.go(-1)
        console.log(props)
    }

    const handleChange = ({ target: { value } }) => {
        setBullet(value);
    };
    /// 发送内容
    const btnpush = () => {
        if (bullet) {
            // push 纯文本
            // screen.push(bullet);
            // or 使用 StyledBullet
            screen.push(
                /// 发送弹幕 StyledBullet:默认样式组件
                <StyledBullet
                    head={headUrl}
                    msg={bullet}
                    backgroundColor={'#fff'}
                    size='large'
                />
            );
            setBullet('')
            // or 还可以这样使用，效果等同使用 StyledBullet 组件
            // screen.push({ msg: bullet, head: headUrl, color: "#eee" })
        }
    }
    return <div className="boxlives">
        <div className="boxlive">
            <img src={item.img} alt="" />
        </div>
        <div className="boxbtn">
            <div className="btngo" onClick={() => { btngo() }}>返回</div>
            <div className="input"><input type="text" value={bullet} onChange={handleChange} /></div>
            <div className="btnpush" onClick={() => { btnpush() }}>发送</div>
        </div>
    </div>
}
export default Pushlive